<template>
    <div class="page_content">
        <el-container>
            <el-aside width="200px">
                <!-- 左侧菜单栏目 -->
                <el-menu 
                    :default-active="$route.path" 
                    :default-openeds="['0']"
                    class="el-menu-vertical-demo">
                    <el-sub-menu :index="index + ''" :key="index" v-for="(item,index) in menu_config.menu_left">
                        <template #title>
                            <el-icon v-if="item.icon == 1"><DataAnalysis /></el-icon>
                            <el-icon v-else-if="item.icon == 2"><Link /></el-icon>
                            <el-icon v-else><Operation /></el-icon>
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item-group v-if="item.child">
                            <!-- 因二级菜单不会再自行跳转，所以此处使用click的方法进行手动跳转 -->
                            <el-menu-item 
                                v-for="(value,key) in item.child" 
                                :key="key" 
                                :index="key"
                                @click="routerTo(key)"
                                >{{ value }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main v-if="$route.path != '/user/index'">
                <router-view />
            </el-main>
            <div v-else>
                这是个人中心首页
                <br/><a href="https://console-docs.apipost.cn/preview/ea1cdc91450f917c/7c43bc0e4102392e" target="_blank">接口文档</a>
            </div>
        </el-container>
    </div>
    <el-divider> ☆ </el-divider>
    <el-backtop :right="100" :bottom="100" />
    <div class="_footer">
        <div><a href="//xiaoyutab.cn" target="_blank">xiaoyutab.cn</a></div>
        <div>Copyright © 2017-{{ date_year }} All Rights Reserved.</div>
    </div>
</template>

<script>
import menu from './config/menu'
export default {
    data(){
        return {
            menu_config: menu,
            date_year:(new Date()).getFullYear()
        }
    },
    methods:{
        // 因二级菜单不会再自行跳转，所以此处使用click的方法进行手动跳转
        routerTo(router){
            var that = this
            that.$router.push(router)
        }
    },
}
</script>
<style lang="less" scoped>
._footer{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    a{
        color:#333333;
    }
}
.el-menu-navs{
    position: fixed;
    top: 0px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #dcdfe6;
    z-index: 4;
    display: flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    div.box{
        margin-left: 50px;
        margin-right: 50px;
        .logos{
            cursor: pointer;
        }
        .el-menu--horizontal{
            border-bottom: none;
        }
        .el-menu--horizontal>.el-menu-item.is-active{
            border-bottom: none;
            background-color: #fff;
        }
        .el-menu-item * {
            vertical-align: baseline
        }
    }
}
</style>

<style lang="less">
.page_content {
    min-height: 400px;
    .el-container{
        min-height: 520px;
    }
    .el-sub-menu__title{
        height: 36px;
        span{
            font-weight: bold;
        }
    }
    .el-menu-item-group__title{
        padding: 2px 0px;
    }
    .el-sub-menu .el-menu-item{
        height: 30px;
    }
}
// 弹窗样式调整
.el-drawer{
    // 移除弹窗的padding弹窗
    .el-drawer__body{
        padding: 0px;
        h1,h2,h3,h4,h5,h6{
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}
</style>